<template>
  <div class="diskInfoWrap">
    <div class="body">
      <div class="body_button">
        <el-button type="primary" size="small" @click="add" v-if="hasAuth('VMS_REAL_REGIONAL_CONFIG_ADD')">新增</el-button>
      </div>
    </div>
    <div class="table_list">
      <tableList
          border
          ref="tableRef"
          :heightMin="155"
          :keySet="keySet"
          :autoHeight="true"
          :tableData="tableData1"
          :paginationShow="true"
          :pageNumber="pages.current"
          :pageSize="pages.size"
          :total="pages.total"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"

      >
        <template #status="{row}">
          <el-switch
              style="display: block"
              v-model="row.status"
              active-value="Y"
              inactive-value="N"
              @change="updateStatus(row)"
              :disabled="!hasAuth('VMS_REAL_REGIONAL_CONFIG_ADD')"
              active-color="#13ce66"
              insactive-color="#ff4949">
          </el-switch>
        </template>

        <template #cz="{row}">
          <!--          <el-button type="text" @click="update(row)">修改</el-button>-->
          <el-button type="text" @click="del(row)">删除</el-button>
        </template>
      </tableList>
    </div>
    <add-info ref="add"></add-info>
  </div>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import addInfo from './add.vue'
import uploadDialog from "@/views/invoiceTemplate/components/uploadDialog.vue";
import {getPage, del, updateStatus} from "@/api/realEstateRegionalAllocation";

export default {
  name: 'realEstateRegionalAllocation',
  mixins: [mixinTable],
  data() {
    return {
      value2: true,
      tableData1: [],
      keySet: [
        {
          label: '地区名称',
          englishName: 'name',
        },
        {
          label: '启用状态',
          englishName: 'status',
          width: 100,
          isSlot: true,
          slotName: 'status'
        },
        {
          label: '操作',
          width: 100,
          isSlot: true,
          slotName: 'cz'
        },
      ],
    }
  },
  mounted() {
    this.getPage();
  },
  methods: {
    async getPage() {
      let params = {
        pageNo: this.pages.current,
        pageSize: this.pages.size,
      }
      const {code, data, msg} = await getPage(params);
      if (code == 200) {
        this.tableData1 = data.records;
        this.pages.total = data.total;
        this.pages.current = data.current;
        this.pages.size = data.size;
      }
    },
    add() {
      this.$refs.add.dialogVisible = true;
      this.$refs.add.title = '新增行政区域'
      this.$refs.add.getProvince()
    },
    update(row) {
      this.$refs.add.dialogVisible = true;
      this.$refs.add.title = '修改行政区域'
      this.$refs.add.getProvince()
      this.$refs.add.getDetail(row.id)
    },
    del(row) {
      // 请确认是否执行删除操作,连带子级区域一起删除,是否继续?
      this.$confirm('请确认是否执行删除操作,连带子级区域一起删除,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 删除操作
        const {data, msg, code} = await del({id: row.id});
        if (code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          await this.getPage();
        } else {
          this.$message({
            type: 'error',
            message: msg
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async updateStatus(row) {
      const {code, msg, data} = await updateStatus({id: row.id})
      if (code == 200) {
        this.$message.success("修改成功")
        await this.getPage();
      }
    },
    handleSizeChange(val) {
      this.pages.current = 1;
      this.pages.size = val;
      this.getPage();
    },
    handleCurrentChange(val) {
      this.pages.current = val;
      this.getPage();
    },
  },
  components: {
    uploadDialog,
    tableList,
    addInfo
  },
}


</script>

<style scoped lang="scss">
@import '@/style/variables.scss';

.diskInfoWrap {
  box-sizing: border-box;
  // padding: 10px;
  .head {
    display: flex;
    height: 18px;
    align-items: center;

    .colCLas {
      width: 4px;
      height: 100%;
      background-color: $allBg;
      margin-right: 12px;
    }

    .info {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }

  .body {
    padding-top: 10px;
  }

  .table_list {
    padding-top: 10px;
    width: 100%;
  }
}
</style>